<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立方体</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        @keyframes r {
            from{
                transform:rotateX(0deg) rotateY(0deg)
            }
            to{
                transform:rotateX(360deg) rotateY(360deg)
            }
        }
        .box{width: 200px;
            height: 200px;
            perspective: 10000px;
            transform-style: preserve-3d;
            /* position: relative; */
            animation: r 10s linear 0s infinite alternate;
            position: absolute;
            right: -300%;
            bottom: -90%;
        }
       
        body{
            background-image: url(./img/v2-04024eb0cca5b0f617c65dcaf3067771_r.jpg);
        }
        .sc{
width: 200px;
height: 200px;
perspective:1000px;
margin-top: 50px;
margin-left:50px;
position: relative;

        }
        .sc:hover .box{
            transform: rotateX(360deg) rotateY(360deg);
        }
        .box div{
            position: absolute;
            width: 200px;
            height: 200px;
            display: block;
        }
        .qian{
            transform: translateZ(100px);
            background-color: aqua;
            opacity: 0.6;
        }
        .top{
            transform: rotateX(90deg)translateZ(100px);
            background-color: beige;
            opacity: 0.6;
        }
        .hou{
            transform:translateZ(-100px) ;
            background-color: red;
            opacity: 0.6;
        }
        .bottom{
            transform: rotateX(90deg) translateZ(-100px);
            background-color: pink;
            opacity: 0.6;
        }
        .left{
            transform: rotateY(90deg) translateZ(100px);
            background-color: black;
            opacity: 0.6;
        }
        .right{
            transform: rotateY(-90deg) translateZ(100px);
            background-color: purple;
            opacity: 0.6;
        }
img{
    width: 200px;
    height: inherit;
}
.mj1{
    position: absolute;
    left: 43%;
    top: 70%;
    font-size: 50px;
color: rgb(251, 251, 251);
font-weight: bold;
text-decoration: none;
}
.mj2{
    position: absolute;
   left:-30%;
   top: 20px;
   
}
.mj3{
    position: absolute;
   left: 30%;
   top: 20px;
}
.mj4{
    position: absolute;
    left: 12%;
    top: 70%;
    font-size: 50px;
color: rgb(255, 0, 0);
font-weight: bold;
text-decoration: none;
}
.mj5{
    position: absolute;
    left: 74%;
    top: 70%;
    font-size: 50px;
color: rgb(0, 8, 246);
font-weight: bold;
text-decoration: none;
}
    </style>
</head>
<body>
<div class="sc">
    <div class="box">
<div class="qian"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a> </div>
<div class="left"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a></div>
<div class="right"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a></div>
<div class="hou"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a></div>
<div class="top"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a></div>
<div class="bottom"> <a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html"><img src="./消灭病毒/20231227-javascript消灭病毒/bingdu/imgs/logo.png" alt="" ></a></div>

    </div>
 
</div>
<p class="mj4" > <a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html">别踩白块</a></p>

<div class="mj2">
    <div class="sc">
    <div class="box">
<div class="qian"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>
<div class="left"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>
<div class="right"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>
<div class="hou"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>
<div class="top"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>
<div class="bottom"><a href="./别踩白块/20231227-别踩白块小游戏/别踩白块小游戏/index.html"><img src="./img/u=646465940,2376448029&fm=253&fmt=auto&app=138&f=JPEG.webp " alt="" ></a></div>

 </div></div>
 
</div>
<p class="mj1"><a href="./消灭病毒/20231227-javascript消灭病毒/bingdu/index.html">消灭病毒</a></p>


<div class="mj3">
    <div class="sc">
    <div class="box">
<div class="qian"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></div>
<div class="left"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></div>
<div class="right"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></a></div>
<div class="hou"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></a></div>
<div class="top"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></a></div>
<div class="bottom"><a href="./码云仓库/码云仓库.html"><img src="./img/gitte.jpg" alt="" ></a></div>

 </div></div>
 
</div>
<p class="mj5"><a href="./码云仓库/码云仓库.html">码云仓库</a></p>

</body>
</html>